<template>
  <div>
    <!-- 按条件搜索框-->
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="名字">
        <el-input v-model="name" placeholder="真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-select v-model="roleId" placeholder="请选择">
           <el-option  value="" >请选择</el-option>
          <el-option
            v-for="role in roles"
            :label="role.roleName"
            :value="role.id"
            :key="role.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
       <el-button type="primary" @click="onSubmit">查询</el-button>
       </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addUser">添加</el-button>
      </el-form-item> 
       
    </el-form>
    <!-- 表格-->
    <template>
      <el-table :data="userData" style="width: 100%" max-height="1000">
        <el-table-column fixed prop="creationDate" label="创建时间" width="120">
        </el-table-column>
        <el-table-column prop="id" label="编号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="真实姓名" width="120">
        </el-table-column>
        <el-table-column prop="userName" label="用户名" width="120">
        </el-table-column>
        <el-table-column prop="password" label="密码" width="120">
        </el-table-column>
        <el-table-column prop="roleName" label="职务" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="150">
        </el-table-column>
        <el-table-column prop="modifyByName" label="修改人" width="120">
        </el-table-column>
        <el-table-column prop="modifyDate" label="修改时间" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="warning"  @click.native.prevent="updateRow(scope.row)">修改</el-button>
             <el-button type="danger"  @click.native.prevent="deleteRow(scope.row.id)">删除</el-button>
            
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="3"
      @current-change="change"
    >
    </el-pagination>

     <!-- 添加添加用户对话框 -->
    <el-dialog title="添加用户" :visible.sync="dialogUserAddVisible">
      <el-form
        :model="addOneUser"
        :rules="rules"
        label-width="100px"
        ref="addOneUser"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addOneUser.name"></el-input>
        </el-form-item>
 
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="addOneUser.userName"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input  v-model="addOneUser.password"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input  v-model="addOneUser.phone"></el-input>
        </el-form-item>

        <el-form-item label="职务" prop="roleId">
          <el-select v-model="addOneUser.roleId" placeholder="请选择">
          <el-option label="请选择" value="" ></el-option>
          <el-option
            v-for="role in roles"
            :label="role.roleName"
            :value="role.id"
            :key="role.id"
          >
          </el-option>
          </el-select>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUserAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="UserAdd">确 定</el-button>
      </div>
    </el-dialog>
    
    <!-- 添加修改页面弹出框 -->
    <el-dialog title="修改用户" :visible.sync="dialogUserUpdateVisible">
      <el-form
        :model="updateOneUser"
        :rules="rules"
        label-width="100px"
        ref="updateOneUser"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="updateOneUser.name"></el-input>
        </el-form-item>

        <el-form-item label="用户名" prop="userName">
          <el-input v-model="updateOneUser.userName"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input  v-model="updateOneUser.password"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input  v-model="updateOneUser.phone"></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="roleId">
          <el-select v-model="updateOneUser.roleId" placeholder="请选择">
          <el-option
            v-for="role in roles"
            :label="role.roleName"
            :value="role.id"
            :key="role.id"
          >
          </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUserUpdateVisible=false">取 消</el-button>
        <el-button type="primary" @click="UserUpdate">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>



<script>
import axios from 'axios';
export default {
  data() {
    return {
      name: "",
      roleId: '',
      userData: [],
      pageIndex: 1,
      pageSize: 3,
      total: 0,
      roles:{},
      dialogUserAddVisible:false,
      addOneUser:{},
      dialogUserUpdateVisible:false,
      updateOneUser:{
        name:"",
        userName:"",
        password:"",
        phone:"",
        roleId:0,
      },
      rules: {
        name:[
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在1-10之间", trigger: "blur" },
        ],
        userName:[
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在1-10之间", trigger: "blur" },
        ],
       phone:[
            {required:true,message:'手机号不能为空',trigger:'blur'},
             {min:11,message:'手机号格式不正确',trigger:'blur'},
         ]
      }
    };
  },

  methods: {
    //按条件查询
    onSubmit() {
    
      this.getAll(this.pageIndex, this.name,this.roleId);
    },
     //修改当前页码
    change(currentPage) {
      this.pageIndex = currentPage;
      this.getAll(this.pageIndex,this.roleId,this.roleId);
    },
    //查询用户
    getAll(pageIndex,name,roleid){
       this.axios.get("/user/getAll",{
        params:{
          pageIndex:pageIndex,
          name:name,
          roleId:roleid
        }
       }).then(res=>{
         console.log(res.data.data);
         this.pageIndex=res.data.data.pageNum;
         this.total=res.data.data.total;
         this.userData=res.data.data.list;
         
       })
    },
    //查询所有角色
    getAllRoles(){
      this.axios.get("/role/list").then(res=>{
         console.log(res.data.data);
         this.roles=res.data.data;
      })
    },
    //弹出添加用户框
    addUser(){
       this.dialogUserAddVisible=true;
    },
    //add添加
    UserAdd(){
       this.axios.post("/user/addUser",this.addOneUser).then(res=>{
          if(res.data.code==200){
                this.$message({
                  message: "成功",
                  offset:150,
                  duration:1000,
                  type: 'success'
                });
                 this.dialogUserAddVisible=false;
           this.getAll(this.pageIndex,this.name,this.roleId);
          }else{
             this.$message.error({
                message: "失败",
                offset:150,
                duration:1000
              });
          }
       })
    },
    //删除用户
    deleteRow(id){
       this.axios.get("/user/removeUser",{
         params:{
           id:id
         }
       }).then(res=>{
          if(res.data.code==200){
            this.getAll(this.pageIndex,this.name,this.roleId);
                this.$message({
                  message: "成功",
                  offset:150,
                  duration:1000,
                  type: 'success'
                });
          }else{
             this.$message.error({
                message: "失败",
                offset:150,
                duration:1000
              });
          }
       })
    },
    //弹出修改框并回显
    updateRow(user){
        this.updateOneUser.id=user.id;
        this.updateOneUser.name=user.name;
        this.updateOneUser.userName=user.userName;
        this.updateOneUser.phone=user.phone;
        this.updateOneUser.password=user.password;
        this.updateOneUser.roleId=user.roleId;
        this.dialogUserUpdateVisible=true;
    },
    //update
    UserUpdate(){
      this.axios.post("/user/updateUser",this.updateOneUser).then(res=>{
          if(res.data.code==200){
            this.dialogUserUpdateVisible=false;
              this.getAll(this.pageIndex,this.name,this.roleId);
                this.$message({
                  message: "成功",
                  offset:150,
                  duration:1000,
                  type: 'success'
                });
          }else{
             this.$message.error({
                message: "失败",
                offset:150,
                duration:1000
              });
          }
      })
    }

  },
  created(){
  this.getAllRoles();
  this.getAll(this.pageIndex,this.name,this.roleId);
  }
};
</script>

<style>
</style>
